import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/layout/index";
import Home from "@/views/home/index";
import About from "@/views/about/index";
import ErrorPage from "@/views/error-page/index";
import Login from "@/views/login/index";
import MenuIndex from "@/views/menu/index";
import MenuCreateOrEdit from "@/views/menu/create-or-edit";
import ResourceCategoryIndex from "@/views/resource-category";
import ResourceIndex from "@/views/resource";
import RoleAllocMenu from "@/views/role/alloc-menu";
import RoleAllocResource from "@/views/role/alloc-resource";
// import RoleIndex from "@/views/role";角色管理列表(懒加载了)
//导入vuex，vuex存在store中
import store from "@/store/index";
Vue.use(VueRouter);

const routes = [
  /*  组件三要素怕脑残 */
  {
    path: "/login",
    name: "login",
    component: Login,
  },
  {
    path: "/",
    name: "",
    component: Layout,
    meta: { requireAuth: true },
    children: [
      {
        path: "",
        name: "home",
        component: Home,
        meta: { requireAuth: true },
      },
      {
        path: "about", // '/about'实际地址
        name: "about",
        component: About,
        meta: {
          requireAuth: true,
        },
      },
      //设置菜单列表的路由
      {
        path: "/menus",
        name: "menus",
        component: MenuIndex,
      },
      //添加菜单页面的路由
      {
        path: "/menu/create",
        name: "menu-creat",
        component: MenuCreateOrEdit,
      },
      //编辑菜单页面的路由
      {
        path: "/menu/:id/edit",
        name: "menu-edit",
        component: MenuCreateOrEdit,
      },
      //资源类别列表的路由
      {
        path: "/resource-category",
        name: "resource-category",
        component: ResourceCategoryIndex,
      },
      //资源列表的路由
      {
        path: "/resources",
        name: "resources",
        component: ResourceIndex,
      },
      //角色管理列表
      {
        path: "/roles",
        name: "roles",
        component: () => import("@/views/role"),
      },
      //角色管理-分配菜单
      {
        path: "/role/:roleId/alloc-menu",
        name: "alloc-menu",
        component: RoleAllocMenu,
        props: true,
        //获取路由id    this.$route.params.roleId
      },
      //角色列表-分配资源
      {
        path: "/role/:roleId/alloc-resource",
        name: "alloc-resource",
        component: RoleAllocResource,
        props: true,
      },
      //用户管理
      {
        path: "/users",
        name: "/users",
        component: () => import("@/views/user/index.vue"),
      },
      //课程列表
      {
        path: "/courses",
        name: "courses",
        component: () => import("@/views/course/index.vue"),
      },
      //新建课程
      {
        path: "/course/create",
        name: "course-create",
        component: () => import("@/views/course/create-or-edit.vue"),
      },
      //编辑课程
      {
        path: "/course/:courseId/edit",
        name: "course-edit",
        component: () => import("@/views/course/create-or-edit.vue"),
        props: true,
      },
    ],
  },
  {
    path: "*", // 前面路由匹配不成功，显示这个路由页面
    name: "error-page",
    component: ErrorPage,
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  // console.log(to.matched.some(r => r.meta.requireAuth));
  if (to.matched.some((r) => r.meta.requireAuth)) {
    // console.log('这个路由需要验证一下登录');
    if (!store.state.tokenInfo) {
      next({
        name: "login",
        query: {
          redirect: to.fullPath,
        },
      });
      return;
    }
  }
  next();
});
export default router;
